<template>
  <a-modal v-model:open="openModel" width="1000px" title="新增维修申请" @ok="onFinish()" ok-text="提交" cancel-text="取消">
    <a-form
        :model="formState"
        v-bind="layout"
        name="nest-messages"
        :validate-messages="validateMessages"
    >
      <a-form-item v-for="{key,title,inputType,rules} in formFields" :key="key" :name="[key]" :label="title" :rules="rules" >
        <template v-if="inputType === 'input'">
          <a-input v-model:value="formState[key]" />
        </template>
        <template v-else-if="inputType === 'input-number'">
          <a-input-number v-model:value="formState[key]" />
        </template>
        <template v-else-if="inputType === 'textarea'">
          <a-textarea v-model:value="formState[key]" />
        </template>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup lang="ts">
import {reactive, ref} from "vue";
import {insert} from "./equipmentRepairAdd.api";
//控制开关Model
const openModel = defineModel('openModel')
//控制里面的表单
const formFields = defineModel('formFields')
console.log(formFields)
const layout = {
  labelCol: { span: 3 },
  wrapperCol: { span: 16 },
};
//定义的规则
const validateMessages = {
  required: '${label}不能为空',
  types: {
    email: '${label}不是一个有效的邮箱格式',
  },
  number: {
    range: '${label} 必须在${min}和${max}之间',
  },
};
//新增的表单数据
const formState = defineModel("formState")
const onFinish = async () => {
  console.log("formState：",formState);
  console.log("formState：",formState.value);
  console.log("applicationDescription",formState.value.applicationDescription);
  console.log("applicationDescription",formState.value.completionDescription);
  // 调用更新状态的API，并传递报修单ID、选中的状态和维修描述
  await insert(formState.value, {});
  openModel.value = false
};
</script>